import './Login.css'
import { Button, Input, message } from 'antd'
import { useState, useEffect } from 'react'
import { setStorage } from '../../utils/utils'
import axios from '../../utils/http'
import { useHistory } from "react-router-dom";
import jQuery from 'jquery'

export const Login = () => {
    const history = useHistory();
    const [userPhone, setPhone] = useState('')
    const [userPwd, setPwd] = useState('')
    const [imgCode, setCode] = useState('')
    const [correctCode, setCorrectCode] = useState('')

    const [registerPhone, setRegisterPhone] = useState('')
    const [registerPwd, setRegisterPwd] = useState('')
    const [registerCode, setRegisterCode] = useState('')

    const [isLogin, setStatic] = useState(true)

    const [showPwd, setShowPwd] = useState(false)

    useEffect(() => {
        getImgCode()
    }, []);

    const successPrompt = (val) => {
        message.success(val);
    };
    const errorPrompt = (val) => {
        message.error(val);
    };

    let validation = (phone) => {
        let myreg = /^[1][3,5,7,8][0-9]{9}$/
        if (!myreg.test(phone)) {
            return false;
        } else {
            return true;
        }
    };

    let ChangePhone = (e) => {
        setPhone(e.target.value)
    }
    let ChangePwd = (e) => {
        setPwd(e.target.value)
    }
    let ChangeCode = (e) => {
        setCode(e.target.value)
    }
    let Login = () => {
        if (!userPhone) {
            errorPrompt('请输入手机号')
        } else if (!userPwd) {
            errorPrompt('请输入密码')
        } else if (!imgCode) {
            errorPrompt('请输入验证码')
        } else {
            if (validation(userPhone)) {
                if (imgCode === correctCode) {
                    axios({
                        url: '/Login',
                        method: 'post',
                        data: {
                            userPhone,
                            userPwd,
                            imgCode
                        }
                    }).then(data => {
                        console.log(data)
                        if (data.data.code === 200) {
                            successPrompt('登陆成功')
                            setStorage('user', data.data.data[0])
                            history.push('/TotalEntry/Index')
                        } else {
                            errorPrompt(data.data.message)
                        }
                    })
                }
                else {
                    errorPrompt('验证码输入错误')
                    getImgCode()
                }
            }
            else {
                errorPrompt('请输入正确的手机号')
            }
        }


    }
    let toIndex = () => {
        history.push('/TotalEntry/Index')
    }
    let getImgCode = () => {
        axios({
            url: '/GetImgCode',
            method: 'get',
        }).then(data => {
            console.log(data.data.txt)
            setCorrectCode(data.data.txt)
            let svg = jQuery.parseXML(data.data.img)
            jQuery('.imgCode svg').remove()
            jQuery('.imgCode').append(svg.documentElement)
        })
    }

    // 输入注册手机号
    const ChangeRuser = (e) => {
        setRegisterPhone(e.target.value)
    }
    // 输入注册密码
    const ChangeRPwd = (e) => {
        setRegisterPwd(e.target.value)
    }
    // 输入注册验证码
    const ChangeRCode = (e) => {
        setRegisterCode(e.target.value)
    }

    // 获取短信验证码
    const getSMScode = () => {
        if (validation(registerPhone)) {
            axios({
                url: '/GetCode',
                method: 'post',
                data: {
                    registerPhone,
                    registerPwd,
                    registerCode
                }
            }).then(data => {
                if (data.data.code === 200) {
                    console.log(data)
                } else {
                    errorPrompt(data.data.msg)

                }
            })
        } else {
            errorPrompt('请输入正确的手机号')
        }
    }

    // 注册账号
    const Register = () => {
        if (!registerPhone) {
            errorPrompt('请输入手机号')
        } else if (!registerPwd) {
            errorPrompt('请输入密码')
        } else if (!registerCode) {
            errorPrompt('请输入验证码')
        } else {
            if (validation(registerPhone)) {
                axios({
                    url: '/validationCode',
                    method: 'post',
                    data: {
                        registerPhone,
                        registerCode,
                    }
                }).then(data => {
                    if (data.data.code === 200) {
                        axios({
                            url: '/Register',
                            method: 'post',
                            data: {
                                registerPhone,
                                registerPwd,
                                registerCode
                            }
                        }).then(data => {
                            if(data.data.code === 200){
                                successPrompt('注册成功')
                                gotoLogin()
                            }else{
                                errorPrompt('注册失败')
                            }
                        })
                    }else{
                        errorPrompt('验证码输入错误')
                    }

                })
            } else {
                errorPrompt('请输入正确的手机号')
            }
        }

    }

    function gotoRegister(val) {
        setStatic(false)
    }

    const gotoLogin = () => {
        setStatic(true)
        getImgCode()
    }

    return (
        <div className='bigDiv'>
            <img className='backgroundImg' src='./images/LoginBack.jpg' alt=''></img>
            <div className='TopNav'>
                <img src='./images/Logo.png' alt=''></img>
                <ul>
                    <li onClick={() => toIndex()}>首页</li>
                </ul>
            </div>
            <div className='parentDiv'>
                {
                    isLogin ? (
                        <div className='childrenDiv'>
                            <div className='leftLogin'>
                                <img style={{ height: '80%' }} src='./images/leftLogin.png' alt=''></img>
                            </div>
                            <div className='rightLogin'>
                                <div className='LoginForm'>
                                    <h2>登录</h2>
                                    <div className='shuru'>
                                        <p>账号</p>
                                        <Input onChange={(e) => ChangePhone(e)}></Input>
                                    </div>
                                    <div className='shuru' style={{position: 'relative'}}>
                                        <p>密码</p>
                                        <Input type={showPwd ? 'text' : 'password'} onChange={(e) => ChangePwd(e)}></Input>
                                        <span onClick={() => setShowPwd(!showPwd)} style={{position: 'absolute',right: '10px',bottom: '5px',color: '#5f6368',cursor:'pointer'}} className='iconfont icon-ai-eye'></span>
                                    </div>
                                    <div className='shuru'>
                                        <p>验证码</p>
                                        <div style={{ display: 'flex', justifyContent: 'space-between', cursor: 'pointer' }}>
                                            <Input style={{ width: '100px' }} onChange={(e) => ChangeCode(e)}></Input>
                                            <div className='imgCode' onClick={() => getImgCode()}></div>
                                        </div>
                                    </div>
                                    <div className='forgetPwd'>
                                        <p>忘记密码？</p>
                                        <p onClick={() => gotoRegister()}>没有账号，去注册</p>
                                    </div>
                                    <div className='LoginBtn'>
                                        <Button onClick={() => Login()} style={{ width: '100%', marginTop: '20px', borderRadius: '50px' }} type='primary'>登录</Button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ) : (
                        <div className='childrenDiv'>
                            <div className='leftRegister'>
                                <div className='LoginForm'>
                                    <h2>注册</h2>
                                    <div className='shuru'>
                                        <p>手机号</p>
                                        <Input onChange={(e) => ChangeRuser(e)}></Input>
                                    </div>
                                    <div className='shuru' style={{position: 'relative'}}>
                                        <p>密码</p>
                                        <Input type={showPwd ? 'text' : 'password'} onChange={(e) => ChangeRPwd(e)}></Input>
                                        <span onClick={() => setShowPwd(!showPwd)} style={{position: 'absolute',right: '10px',bottom: '5px',color: '#5f6368',cursor:'pointer'}} className='iconfont icon-ai-eye'></span>
                                    </div>
                                    <div className='authCode'>
                                        <p>验证码</p>
                                        <Input onChange={(e) => ChangeRCode(e)}></Input>
                                        <Button type="primary" onClick={() => getSMScode()}>获取验证码</Button>
                                    </div>
                                    <div className='forgetPwd'>
                                        <p onClick={() => gotoLogin()}>已有账号，去登录</p>
                                    </div>
                                    <div className='LoginBtn'>
                                        <Button onClick={() => Register()} style={{ width: '100%', marginTop: '20px', borderRadius: '50px' }} type='primary'>注册</Button>
                                    </div>
                                </div>
                            </div>
                            <div className='rightRegister'>
                                <img style={{ height: '80%' }} src='./images/leftLogin.png' alt=''></img>
                            </div>
                        </div>
                    )
                }



            </div>

        </div>
    )
}